<template>
  <div class="echarts-diagram">
    <div ref="echarts"></div>
  </div>
</template>
<script>
import Data from "../../data/index";
import Config from "../../config/index";
import { type } from "os";
let myChart;
export default {
  name: "Echarts",
  props: ["type", "show", "bg", "data", "eclick"],
  mounted() {},
  data() {
    return {
      dialogAddForm: {
        name: "",
        ip: "",
        desc:""
      },};
  },
  watch: {
    show: {
      immediate: true,
      handler: function(n) {
        if (n) {
          console.log('显示图表',this.type)
          setTimeout(() => {
            this.showChart();
            myChart.resize();
          }, 200);
        }
      }
    }
  },
 methods: {
    dialogAddSubmit(){
      if(this.dialogAddForm.name.length < 3 || this.dialogAddForm.name.length > 10 ){
        alert('长度不小于数字3字符或3个字母或3个中文字符， 最大不超10个中文字符');
        return;
      }
      let reg = /(((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))\.){3}((\d{1,2})|(1\d{1,2})|(2[0-4]\d)|(25[0-5]))/;
       if (!reg.test(this.dialogAddForm.ip)) {
        alert("只允许IPv4地址由4组数字组成，每组数字之间以.分隔，每组数字的取值范围是0~255");
        return false;
      }
       if(this.dialogAddForm.desc   > 30 ){
        alert('备注信息最大不超30个中文字符');
        return;
      }

    },
    reload() {
      if (myChart) {
        this.showChart();
      }
    },
    showChart() {
      myChart = this.$echarts.init(this.$refs.echarts, Config.echartsTheme);
      let options = this.getOption();
      if (this.bg) {
        options.backgroundColor = this.bg;
      }
      if (this.data) {
        if (this.type != "style2" && this.type != "style5") {
          options.xAxis.data = this.data.xAxisData;
          options.xAxis.boundaryGap = this.data.isboundaryGap || false;
        } else if (this.type == "style5") {
          options.yAxis.data = this.data.yAxisData;
          options.xAxis.boundaryGap = this.data.isboundaryGap || false;
        }
        options.tooltip = this.data.tooltip;
        options.series = this.data.series;
        options.color = this.data.color || options.color;
        options.legend = this.data.legend;
        if (this.data.yname) {
          options.yAxis.name = this.data.yname;
          options.grid.top = 40;
        }
      }
      console.log(options);
      myChart.setOption(options);
      myChart.on("click", params => {
        console.log("myChart click");
        if (this.eclick) {
          console.log("myChart click into");
          this.eclick();
        }
      });
    },
    getOption() {
      if (this.type == "style1") {
        //1.无网格 2.x&y坐标轴正常显示
        return {
          grid: {
            top: this.data && this.data.legend ? 30 : 10,
            bottom: 40,
            left: 40,
            right: 40
          },
          xAxis: {
            data: [],
            show: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: []
        };
      } else if (this.type == "style2") {
        //圆形
        return {};
      } else if (this.type == "style3") {
        //散点图
        console.log("散点图");
        return {
          grid: {
            top: 10,
            bottom: 40,
            right: 20,
            left: 40
          },
          xAxis: {
            boundaryGap: false,
            scale: true,
            show: true,
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          color: ["#06BBA4", "rgba(248,154,0,1)"],
          series: []
        };
      } else if (this.type == "style4") {
        return {
          grid: {
            top: 10,
            bottom: 40,
            right: 20,
            left: 40
          },
          xAxis: {
            boundaryGap: false,
            scale: true,
            show: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              lineStyle: {
                type: "dotted"
              }
            }
          },
          series: []
        };
      } else if (this.type == "style5") {
        return {
          grid: {
            top: 30,
            bottom: 40,
            right: 20,
            left: 20
          },
          xAxis: {
            boundaryGap: false,
            scale: true,
            show: true,
            axisTick: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            show:false,
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLine: {
              show:false,
              lineStyle: {
                color: "#E2E2E2"
              }
            },
            splitLine: {
              show:false,
              lineStyle: {
                type: "dotted"
              }
            }
          },
          series: []
        };
      } else if (this.type == "c1") {
        return {
          grid: {
            top: 40,
            bottom: 10
          },
          legend: {
            data: ["CPU", "内存", "CPU2", "内存2"],
            itemHeight: 5,
            itemWidth: 5
          },
          xAxis: {
            data: ["CPU", "内存", "CPU", "内存"],
            show: true,
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            splitLine: {
              show: false
            }
          },
          yAxis: {
            splitLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          series: [
            {
              name: "CPU",
              type: "bar",
              barWidth: 1,
              data: [{ value: 0 }]
            },
            {
              name: "内存",
              type: "bar",
              barWidth: 1,
              data: [{ value: 0 }]
            },

            {
              name: "CPU2",
              type: "bar",
              barWidth: 1,
              data: [{ value: 0 }]
            },
            {
              name: "内存2",
              type: "bar",
              barWidth: 20,
              data: [
                {
                  value: 5,
                  itemStyle: {
                    color: "#06BBA4"
                  }
                },
                {
                  value: 5,
                  itemStyle: {
                    color: "rgba(248,154,0,1)"
                  }
                },
                {
                  value: 5,
                  itemStyle: {
                    color: "rgba(225,104,77,1)"
                  }
                },
                {
                  value: 5,
                  itemStyle: {
                    color: "rgba(91,150,237,1)"
                  }
                }
              ]
            }
          ]
        };
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.echarts-diagram,
.echarts-diagram > div {
  width: 100%;
  height: 100%;
}
</style>